<template>
  <div class="pic-code cursor">
    <img class="pic-img" :src="getSrc" alt="验证码" title="验证码" height="30px" />
    <div class="pic-refresh">
      <div class="mask-inner" @click="refresh">
        <img class="mr-5" :src="refreshImg" width="16" />
        <span>刷新</span>
      </div>
    </div>
  </div>
</template>
<script>
import { generateCaptcha } from "@/service";
import { findComponentUpward } from "@/libs/assist";
import { random } from "@/libs/tools";
export default {
  name: "PicCode",
  data() {
    return {
      refreshImg: require("@/assets/img/refresh.png"),
      randomStr: ""
    };
  },
  computed: {
    getSrc() {
      let ltId = findComponentUpward(this, "Home").securityConfig._lt;
      return `/iap/generateCaptcha?ltId=${ltId}&random=${this.randomStr}`;
    }
  },
  methods: {
    async refresh() {
      this.randomStr = random();
    }
  },
  mounted() {
    this.refresh();
  }
};
</script>
<style lang="stylus" scoped>
.pic-code {
  height: 42px
  border: 1px solid #D9D9D9
  background: #fff
  cursor: pointer
  text-align: center
  position: relative
  .pic-img {
    padding-top: 8px
  }
  .pic-refresh {
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: hidden
  }
  .mask-inner {
    opacity: 0
    cursor: pointer
    font-size: 16px
    color: #FFFFFF
    text-align: center
    line-height: 32px
    letter-spacing: 0
    text-decoration: none
    position: absolute
    left: 0
    top: 100%
    width: 100%
    height: 100%
    transition: top ease 200ms // 若产出效果,则需要将top:0改写top:100%
    visibility: visible
    background: rgba(0, 0, 0, 0.5)
  }
  .mask-inner img, .mask-inner span {
    vertical-align: middle
  }
  &:hover {
    .mask-inner {
      top: 0
      opacity: 1
      visibility: visible
    }
  }
}
</style>